import React,{Component} from 'react';
import {Row,Col} from 'antd';
import './medicalCenter.less';
import classNames from 'classnames';
import Lang from './Lang.json';
import Source from './Lang';
import MobileLang from './mobileLang.json';
const prefix = 'medical-center';
class MedicalCenter extends Component{
    render(){
        return(
            <div className={prefix}>
                <div className={prefix+'-container'}>
                    <h1>为什么选择梅奥医疗集团</h1>
                    <Row type="flex" justify="space-between" align="top" className={prefix+'-row'}>
                        <Col className={prefix+'-list-container'}>
                            {Lang.map((value,index)=>{
                                return(
                                    <li key={index}>
                                        {value}
                                    </li>
                                )
                            })}
                        </Col>
                        {
                            Source.map((value,index)=>{
                                return(
                                    <Col key={index} className={classNames(prefix+'-col','clo'+index)} id={"col-"+index}>
                                        <div className={prefix+'-img-container'}>
                                            <img src={value.src} alt=""/>
                                            <p className={prefix+'-content'}>
                                                {value.content}
                                            </p>
                                            <div className={prefix+'-dialog'}>
                                            </div>
                                        </div>
                                    </Col>
                                )
                            })
                        }
                    </Row>
                    <div className={prefix+'-mobile-list'}>
                        {MobileLang.map((value,index)=>{
                            return(
                                <li key={index}>
                                    {value}
                                </li>
                            )
                        })}
                    </div>
                </div>
            </div>
        )
    }
}
export default MedicalCenter;